<%--
  Created by IntelliJ IDEA.
  User: yuyufeng
  Date: 2018/1/22
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>滑动验证码测试</title>
    <script src="static/jquery.js"></script>
    <style>
        #content {
            position: relative;
            margin: 30px;
            margin-left: 100px;
            width: 800px;
            height: 600px;
            /*border:1px solid red;*/
            cursor: pointer;

        }

        body {
            margin: 0;
            padding: 0;
            border: 0;
        }

        #validImage-cut {
            left: 600px;
            top: 200px;
            position: absolute;
            z-index: 100;
            width: 80px;
            height: 80px;
            background-color: #00FF66;

        }

        #validImage {
            float: left;
            z-index: 20;
            background-color: #CCCCCC;
            width: 550px;
            height: 400px;
            cursor: pointer;
        }

        #valid-slider {
            position: relative;
            margin-top: 10px;
            width: 550px;
            height: 30px;
            float: left;
            background-color: #CCCCCC;
            cursor: pointer;
        }

        #slider-button {
            position: absolute;
            top: -10px;
            left: 0px;
            height: 50px;
            width: 30px;
            background-color: #555555;
            cursor: pointer;
        }

    </style>
</head>

<body>
<div id='content'>
    <image id="validImage"></image>
    <image id="validImage-cut"></image>
    <div id="valid-slider">
        <h3 style="color: #FFFFFF;text-align: center;margin-top:0px;">将左边的滑块滑动到正确的位置</h3>
        <div id='slider-button'></div>
    </div>
    <p>当前滑块坐标：<b id="locationNow">600,200</b></p>
    <p>服务器端验证结果：<b id="validResult" style="color:red;font-size: 50px;"></b></p>
    <p>您花了 <b id="timeCon" style="color:red;font-size: 50px;">0</b> ms </p>
    <a href="javascript:history.go(0)" style="color: aquamarine;font-size: 50px;margin-left: 630px;">刷新</a>
</div>

</body>
<script>



    var offsetX;
    var vicY = 100;
    var start;
    var end;

    var vic = document.getElementById("validImage-cut");
    var vi = document.getElementById("validImage");
    var sliderButton = document.getElementById("slider-button");
    var validSlider = document.getElementById("valid-slider");
    var validImageCut = document.getElementById("validImage-cut")


    $.get("/validImageJson", function (res) {
        var res = JSON.parse(res)
        vicY = res.locationY
        if (res.status == 200) {
            vic.style.backgroundImage = "url('/validImageLocation')"
            vi.style.backgroundImage = "url('/validImage')"
        }
    })






    sliderButton.ondragstart = function () {
        return false;
    };
    sliderButton.onselectstart = function () {
        return false;
    };

    sliderButton.onmousedown = function (e) {
        console.log('sliderButton.mousedown')
        offsetX = e.offsetX
        start = new Date().getTime();//起始时间
        validImageCut.style.top = vicY

        document.onmousemove = function (e) {
            console.log('document.mousemove')

            var left = e.clientX - 100

            if (left > 470) {
                left = 470
            }
            if (left < 0) {
                left = 0;
            }

            sliderButton.style.left = left
            validImageCut.style.left = left

            document.getElementById("locationNow").innerHTML = left + ',' + vicY


        }

        document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
            end = new Date().getTime();
            $("#timeCon").html(end - start)

            $.get("/doValidServlet?location="+$("#locationNow").text(),function (res) {
                $("#validResult").hide("fast")
                $("#validResult").html(res.data)
                $("#validResult").show("fast")
                $("#timeCon").show("fast");
            })


        }

    }


</script>

</html>